<template>
	<view>
		<!-- navbar -->
		<van-nav-bar title="排队" :border="false" title-class="custom-navbar-title" />
		<!-- scroll-view -->
		<scroll-view @refresherrefresh="handleRefresh" refresher-enabled
			:refresher-triggered="trigger" scroll-y :style="{height: height, backgroundColor: '#f8f8f8'}">
			<van-image width="100%" height="400rpx"
				src="http://zhj-jiuba.oss-cn-hangzhou.aliyuncs.com/picture/banner1.jpeg" />
			<view class="queue-box">
				<view class="queue">
					<view class="queue-title">
						<view class="queue-title-1">
							<text>餐桌类型</text>
						</view>
						<view class="queue-title-1">
							<text>等待桌数</text>
						</view>
						<view class="queue-title-1">
							<text>预计等待</text>
						</view>
					</view>
					<view class="queue-item van-hairline--bottom" v-for="item in queueRecordsList" :key="item.id">
						<view class="queue-title-2">
							<text>{{item.deskName}}</text>
							<text style="color: #666;font-size: 24rpx;">{{item.remark}}</text>
						</view>
						<view class="queue-title-2">
							<text style="color: #EE0A24;font-weight: bold;">{{item.count}}</text>
							<text>桌</text>
						</view>
						<view class="queue-title-2">
							<text>约<text style="font-weight: bold;padding: 0 4rpx;">{{item.duration}}</text>分钟</text>
						</view>
					</view>
				</view>
				<view class="queue-res" v-if="!isShow">
					<view class="queue-res-title">
						<text style="color: #000000;font-weight: bold;font-size: 56rpx;">{{statusInfo.number || 'A99'}}</text>
						<text style="color: #666;">{{statusInfo.deskName || '空桌'}}({{statusInfo.remark || '99分钟'}})</text>
					</view>
					<view class="queue-res-content">
						<view class="queue-res-content-l">
							<text><text style="color: #EE0A24;font-size: 36rpx;padding-right: 8rpx;">{{statusInfo.count || 0}}</text>桌</text>
							<text>前方等待桌数</text>
						</view>
						<view class="queue-res-content-l">
							<text><text style="color: #EE0A24;font-size: 36rpx;padding-right: 8rpx;">≥{{statusInfo.duration || 0}}</text>分钟</text>
							<text>预计等待时长</text>
						</view>
					</view>
					<view style="padding: 32rpx;">
						<van-button type="danger" block round @click="cancel">取消排队</van-button> 
					</view>
				</view>
				<van-button v-if="isShow == true" type="danger" block round @click="show = true">立即排队</van-button>
			</view>
		</scroll-view>
		<van-popup :show="show" position="left" custom-style="width: 40vw;height: 100%"@close="handleClose">
			<view style="height: 200px;"/>
			<view style="padding: 0 32rpx;">
				<view class="choose-title">
					<text>选择桌型</text>
				</view>
				<view @tap="choose = item.id" :class="['choose-item', choose === item.id ? 'choose-item-active' : null]" v-for="item in queueRecordsList" :key="item.id">
					<text style="font-size: 36rpx;">{{item.deskName}}</text>
					<text class="choose-item-count">{{item.remark}}</text>
				</view>
				<view style="height: 72rpx;"/>
				<van-button type="danger" block round @click="confirm" size="small">确认取号</van-button>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {queueRecords, lineUp, getStatus, cancel} from '../../api/shop/index.js';
	import {mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				choose: null,
				queueRecordsList: [], // 排队列表
				trigger: false
			}
		},
		computed: {
			...mapState(['userInfo', 'statusInfo']),
			height() {
				return this.scrollviewHeilght - 96 + 'px'
			},
			isShow() {
				// true 没有桌子信息 false 有桌子信息
				if(this.statusInfo == null) {
					return null;
				}
				return Object.keys(this.statusInfo).length === 0
			}
		},
		created() {
			this.getQueueRecords();
		},
		methods: {
			...mapActions(['setStatusInfo']),
			// 排队列表
			getQueueRecords() {
				queueRecords().then(res => {
					this.queueRecordsList = res.data;
				});
			},
			// 确认排队
			confirm() {
				if(this.choose == null) {
					this.$slTip('请选择桌型');
					return
				}
				lineUp({queueId: this.choose}).then(res => {
					this.statusInfo = res.data;
					this.getQueueRecords();
					this.show = false;
				})
			},
			// 取消排队
			cancel() {
				cancel({id: this.statusInfo.id}).then(res => {
					this.statusInfo = {};
					this.getQueueRecords();
				});
			},
			handleClose() {
				this.choose = null;
				this.show = false;
			},
			handleRefresh() {
				this.getQueueRecords();
				this.trigger = true;
				this.setStatusInfo({id: this.userInfo.id}).then(() => {
					this.trigger = false;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.choose-title {
		font-size: 36rpx;
		line-height: 36rpx;
		color: #000000;
		text-align: center;
		margin-bottom: 72rpx;
	}
	
	.choose-item {
		height: 120rpx;
		display: flex;
		flex-direction: column;
		border-radius: 16rpx;
		justify-content: center;
		align-items: center;
		margin-bottom: 32rpx;
		border: 2rpx solid #666;
	}
	.choose-item-count {
		color: #999999;
	}
	.choose-item-active {
		color: #FFFFFF!important;
		background-color: #EE0A24;
		border-color: #EE0A24;
		.choose-item-count {
			color: #FFFFFF!important;
		}
	}
	.queue-box {
		padding: 32rpx;

		.queue {
			border-radius: 16rpx;
			box-shadow: #999 0px 0px 10px;
			background-color: #fff;
			position: relative;
			top: -200rpx;

			.queue-title {
				height: 90rpx;
				color: #000;
				background-color: #F8F8F8;
				display: flex;
				border-radius: 16rpx 16rpx 0 0;

				.queue-title-1 {
					flex: 1;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
				}
			}

			.queue-item {
				height: 120rpx;
				display: flex;

				.queue-title-2 {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.queue-res {
			position: relative;
			top: -168rpx;
			border-radius: 16rpx;
			box-shadow: #999 0px 0px 10px;
			background-color: #fff;
			.queue-res-title {
				height: 160rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				border-bottom: 2rpx dashed #ddd;
				padding: 16rpx 0;
			}
			.queue-res-content {
				height: 180rpx;
				display: flex;
				.queue-res-content-l {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					color: #666;
				}
			}
		}
	}
</style>
